<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<body>
<script src="http://js.letvcdn.com/lc07_lecloud/201603/11/10/22/header.js"/>
<label th:text="'欢迎使用漫画服务接口工具' + ${comicVersion}"></label>

<form action="" th:each="configMap,configMapStat:${listMap}" th:name="${configMap['name']}">
    <table>
        <thead th:text="${configMap['name']}"></thead>
        <tbody>
        <tr>
            <td >url: </td>
            <td><input class="url" type="text" th:value="${configMap['url']}"/></td>
        </tr>
        <tr>
            <td th:text="${configMap['prefix']} + ': '"></td>
            <td><input name="prefix" type="text" th:value="${configMap['value']}"/></td>
        </tr>
        <tr th:each="key,configStat:${configMap['keys']}">
            <td th:text="${key.title} + ': '"></td>
            <td><input class="keys" th:name="${key.name}" type="text" th:value="${key.value}"/></td>
        </tr>
        <tr>
            <td><input class="send" type="button" value="发送"/></td>
        </tr>
        <tr>
            <td>返回:</td>
            <td>
                <textarea class="ret" style="width: 500px; height: 100px;"/>
            </td>
        </tr>
        </tbody>
    </table>

</form>
<div th:if="${#maps.isEmpty(listMap)}">
    没有配置接口,如需配置接口<a href="test/manager">点击此处</a>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes()
                + seperator2 + date.getSeconds();
        return currentdate;
    }
    $(".send").click(function () {
        var form = $(this).closest("form");
        var url = form.find(".url");
        var ret = form.find(".ret");
        var keys_elements = form.find(".keys");
        var keys = new Array();
        for(var i=0;i<keys_elements.length;i++){
            keys.push($(keys_elements[i]).val());
        }
        var prefix = form.find("input[name='prefix']");
        $.ajax({
            url: url.val(),
            data: {
                prefix : prefix.val(),
                key : keys.join(':')
            },
//            dataType: "JSON",
            success : function(data) {
                ret.val(ret.val() + getNowFormatDate() + "request: " + url.val() + " result: " + data + "\n");
            },
            error : function() {

            }
        });
    });

    /*]]>*/
</script>

</body>
</html>